<template>
<div class="searchbefore">
     <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="value?$router.push('./search?key='+value):''"
    @cancel="$router.push('./home')"
  />
  <!-- $router.push({path: '/search', query: { key: value }}) -->
  
  <div class="find">
      <div class="title">
          <div class="lefttitle">搜索发现</div>
          <!-- <div class="change"><span>换一换</span><van-icon class="replay" name="replay" /></div> -->
      </div>
      <div class="keyword">
          <span class="word" :class="word.vlag" v-for="word in keylist" :key="word" @click="$router.push('./search?key='+word.val)">{{word.val}}</span>
      </div>
  </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
    setup(){
        const data=reactive({
            //keylist:[{vlag:'',val:'耐克 dunk'},'nike板鞋','彪马卫衣男','斯凯奇男鞋','夹克外套女','匡威女鞋高帮','阿迪达斯鞋','cuury','富士山','乔丹篮球','aj灰白','闪击5','女生鞋'],
             keylist:[{vlag:'',val:'可乐'},{vlag:'',val:'啤酒'},{vlag:'',val:'莫小仙'},{vlag:'hot',val:'鸥翼'},{vlag:'',val:'橙宝'},{vlag:'hot',val:'茱蒂丝'},{vlag:'',val:'六必居'},{vlag:'hot',val:'果仁张'},{vlag:'',val:'鲜汁客'},{vlag:'',val:'大马士革'},{vlag:'',val:'一百份'},{vlag:'',val:'可康'},{vlag:'',val:'GPR'}],
            value:'',
        });
        return {...toRefs(data)}
    }
}
</script>
<style lang="scss" scoped>
.title{
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    .lefttitle{
        font-weight: 600;
    }
    .change,.replay{
        color:#aaa;
    }
}
.keyword{
    .word{
            padding: .5rem 1rem;
    margin: .6rem;
    background: #F2F2F2;
    display: inline-block;
    font-size: 1.3rem;
    }
    .hot{
        color: #f60;
    background: #ffeded;
    }
}
</style>